<script setup>
import { ref , watch } from 'vue'
import { RouterLink, RouterView , useRoute} from 'vue-router'
const route = useRoute()

const curIndex = ref(0)
const data = ref([
  { name: '电影', judgeString: 'films', target:'/' },
  { name: '影院', judgeString: 'cinema', target:'/cinema'},
  { name: '我的', judgeString: 'mine', target:'/mine'}
])

console.log(route.name)

</script>

<template>
  <RouterView></RouterView>
  <footer>
    <RouterLink
    :class="{'active': route.name === item.judgeString}"
    v-for="(item, index) in data"
    :key="item"
    @click="curIndex = index"
    :to="item.target">
    {{ item.name }}
    </RouterLink>
  </footer>
</template>

<style lang="scss" scoped>
footer{
  width: 100%;
  height: 50px;
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: space-evenly;
  background-color: white;
  a{
    display: block;
    height: 50px;
    font: normal 600 14px/.5rem "楷体";
    color: rgb(0, 0, 0);
    font-size: 25px;
  }
  .active{
    color: red;
  }
}
</style>
